<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p style="color: blueviolet;font-weight: bold;">欢迎注册会员</p>
    <form action="">
      <label
        >手机号码：<input
          type="text"
          name="phonenumber"
          maxlength="11"
          placeholder="11位手机号" /></label
      ><span style="color: red">必填</span><br />
      <label
        >创建密码：<input
          type="text"
          name="createpassword"
          maxlength="8"
          placeholder="8位密码" /></label
      ><span style="color: red">必填</span><br />
      <label
        >注册邮箱：<input
          type="text"
          name="registeredemail"
          placeholder="例如：wustzz@sina.com" /></label
      ><span style="color: red">必填</span><br />
      <label
        >&nbsp;&nbsp;&nbsp;验证码：<input type="text" name="verificationcode"
      /></label>
      <span style="width: 500px; margin: 30px auto; text-align: center">
        <span
          id="capcha"
          style="display: inline-block; width: 80px; cursor: pointer"
          >5位验证码</span
        >
        <img
          src="images/arrow_03.png"
          id="change_capcha"
          alt=""
          style="vertical-align: middle; width: 30px; cursor: pointer"
        />
      </span>
      <br />
      <label
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：<input
          type="radio"
          name="sex"
        />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
          type="radio"
          name="sex"
        />女</label
      ><br />
      <label
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：<input
          type="text"
          name="birthday" /></label
      ><br />
      <label
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：<input
          type="text"
          name="age" placeholder="年/月/日"/></label
      ><br />
      <label
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：
        <select name="名称" size="1">
          <option value="1">湖北省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
          <option value="2">河南省</option>
          <option value="3">山东省</option>
          <option value="4">湖南省</option>
          <option value="5">广东省</option>
        </select>
        <select name="名称" size="1">
          <option value="1">武汉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
          <option value="2">黄冈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
          <option value="3">襄阳&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
          <option value="4">荆州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
        </select> </label
      ><br />
      <label
        >个人学历：
        <select name="名称" size="1">
          <option value="1">
            本科&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
          </option>
          <option value="2">研究生</option>
          <option value="3">博士</option>
          <option value="4">硕士</option>
          <option value="5">中专</option>
        </select> </label
      ><br />
      <label
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：<input
          type="range"
          name="wage"
          min="0"
          max="10000"
          step="100"
          value="5000"
          id="wage" /></label
      ><span id="msg"></span><br />
      <label
        >个人爱好：<input type="checkbox" name="sing" />唱歌<input
          type="checkbox"
          name="run"
        />跑步<input type="checkbox" name="swim" />游泳</label
      ><br />
      <label
        >个人照片：<input
          type="file"
          name="photo"
          accept="image/*"
          id="test-image-file" />
        <div
          id="test-image-preview"
          style="
            border: 1px solid silver;
            width: 100%;
            height: 200px;
            background-repeat: no-repeat;
            background-position: center;
          "
        ></div
      >
    </label>
      <br />
      <label
        >个人简历：<br /><textarea
          name="jianli"
          id=""
          cols="30"
          rows="10"
        ></textarea></label
      ><br />
      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
    </form>

    <!-- //进度条 -->
    <script>
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("wage").value; // 获取区间域初始value值
      };
      document.getElementById("wage").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
    </script>
    <!-- //图片预览 -->
    <script>
      var fileInput = document.getElementById("test-image-file");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： '...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
    <script>
      let codeStr =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      //验证码长度
      let length = 5;
      let capcha = document.getElementById("capcha");
      let change_capcha = document.getElementById("change_capcha");
      // 用来生成一个[n,m]随机整数
      function getRandom(n, m) {
        return parseInt(Math.random() * (m - n + 1) + n);
      }
      function getCode() {
        let str = "";
        // 验证码有几位就循环几次
        for (let i = 0; i < length; i++) {
          let index = getRandom(0, 61);
          str += codeStr.charAt(index);
        }
        capcha.innerHTML = str;
      }
      // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
      getCode();
      // 点击刷新验证码
      capcha.addEventListener("click", getCode);
      change_capcha.addEventListener("click", getCode);
    </script>
  </body>
</html>
